window.onload=function(){
    //1.找到相关的元素对象
    var pre=document.querySelector('.preview_img');
    var mask=document.querySelector('.mask');
    var big=document.querySelector('.big');

    // console.log(mask);

    //2.事件源，事件，功能代码
    //鼠标移动至该区域，显示遮挡层和大图像
    pre.addEventListener('mouseover',function(){
        mask.style.display='block';
        big.style.display='block';
    });
    //鼠标离开该区域，隐藏模态框和遮挡层
    pre.addEventListener('mouseout',function(){
        mask.style.display='none';
        big.style.display='none';
    })

    //鼠标移动遮挡层也移动
    pre.addEventListener('mousemove',function(e){
        //计算鼠标在盒子的位置，后赋值给遮挡层
        var x=e.pageX-this.offsetLeft;
        var y=e.pageY-this.offsetTop;

        var maskx=x-mask.offsetWidth/2;
        var masky=y-mask.offsetHeight/2;
        // mask最大移动距离
        var maskMax=this.offsetWidth;

        if(maskx<=0){
            maskx=0;
        }else if(maskx>=maskMax){
            maskx=maskMax;
        }
        if(masky<=0){
            masky=0;
        }else if(masky>=maskMax){
            masky=maskMax;
        }

        mask.style.left=maskx +'px';
        mask.style.top=masky +'px';

        //大图像的x和y坐标随着遮挡层移动而移动
        //按照一定比例移动:最大移动距离比例
        var bigImg=document.querySelector('.bigImg');
        var bigMax=big.offsetWidth-bigImg.offsetWidth;
        //计算大图像移动后的x坐标和y坐标
        var bigx=maskx * bigMax / maskMax;
        var bigy=masky * bigMax / maskMax;
        // //设置大图像x、y坐标
        bigImg.style.left=bigx+'px';
        bigImg.style.top=bigy+'px';
    })  
}



       